<template>
  <Row class="chat">
    <div style="width: 83.333%">
      <chat-body :roomid="roomid"></chat-body>
      <chat-foot :roomid="roomid" :choose="choose" @send="send"></chat-foot>
    </div>
    <div class="chatlist">
      <!--<Tab-pane label="在线人员" icon="person-stalker">-->
      <Card :bordered="false" style="overflow-y:visible; " dis-hover>
        <ul>
          <li v-for="item in  CHAT.onlineUsers" @click="listclick(item)">
            <Icon type="person" color="blue" size="18"></Icon>
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </Card>
      <!--</Tab-pane>-->
    </div>

  </Row>
  <!-- <group-info></group-info> -->
</template>

<script>
  import ChatBody from './ChatBody'
  import ChatFoot from './ChatFoot'
  import CHAT from '../../api/wsclient'

  export default {
    data: function () {
      return {
        CHAT,
        choose: ''
      }
    },
    props: {
      roomid: {
        type: String,
        default () {
          return '';
        }
      }
    },
    components: {
      ChatBody,
      ChatFoot,
    },
    methods: {
      listclick(item){
        console.log(item)
        this.choose = item
      },
      send(){
        this.choose = null
      }
    }
  }
</script>

<style>

  .chat {
    display: flex;
    /*flex-direction: column;*/
    float: right;
    height: 100%;
    width: 100%;
    /*padding-bottom: 30px;*/
    margin-bottom: 30px;
    justify-content: space-between;
    /*border: 1px solid #d7dde4;*/
  }

  .chatlist {
    width: 16.667%;
    /*margin-bottom: -20px;*/
    border: 1px solid #d7dde4;
  }
</style>
